<template>
  <div>
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="captcha"
        type="text"
        name="captcha"
        label="验证码"
        placeholder="验证码"
        :rules="[{ required: true, message: '请填写验证码' }]"
      >
      </van-field>
        <Captcha style="float:right" ref="cap"></Captcha>

      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>

    </van-form>
  </div>
</template>

<script>
// 导入需要的vant组件并注册
import Vue from "vue";
import { Field, Button, Form } from "vant";
import Captcha from "@/components/tools/Captcha.vue";
import uri from "@/config/uri"
import { Toast } from 'vant';

Vue.use(Toast);
Vue.use(Form);
Vue.use(Field);
Vue.use(Button);

export default {

  data() {
    return {
      username: "",
      password: "",
      captcha:"",
    };
  },
  methods: {
    onSubmit(values) {
        this.$http.post(uri.pwdLogin,{
            key:this.$store.state.capKey,
            ...values
        }).then(res=>{
            console.log(res);
            if(res.errNo==0){
              Toast.success("登录成功")
              this.$router.push("/")
            }else{
              Toast.fail("登录失败")
              // 验证失败刷新验证码
              this.$refs.cap.reload();
            }
        })
    },
  },
  components:{
      Captcha
  }
};
</script>

<style scoped>
.van-button{
  background-color:#4cd970;
  border: 1px solid #4cd970;
  border-radius:0px
}
</style>